<template>
  <div>
    <div class="app-container">
      <div class="search-container">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item>
            <el-button :disabled="false" type="primary" @click="AddRam()">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="datatable" border height="410px" style="width: 100%">
          <el-table-column prop="id" label="序号" align="center">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="耳号" align="center">
            <template #default="scope">
              <el-select v-model="scope.row.earTag" placeholder="请选择耳号">
                <el-option v-for="item in children" :key="item.earTag" :label="item.earTag" :value="item.earTag" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="栋舍" align="center">
            <template #default="scope">
              <el-select v-model="scope.row.ridgepoleId" placeholder="请选择栋舍ID"
                @change="getcolumnIdList(scope.row.ridgepoleId)">
                <el-option :label="item.ridgepoleName" :value="item.ridgepoleId" v-for="item in buildingIdList" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="栏位" align="center">
            <template #default="scope">
              <el-select v-model="scope.row.columnManagementId" placeholder="请选择栏位ID">
                <el-option :label="item.columnName" :value="item.columnManagementId" v-for="item in columnIdList" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="阶段" align="center">
            <template #default="scope">
              <el-select v-model="scope.row.stage">
                <el-option label="请选择" :value="0" />
                <el-option label="乳羊" :value="1" />
                <el-option label="保育" :value="2" />
                <el-option label="后备公羊" :value="3" />
                <el-option label="后备母羊" :value="4" />
                <el-option label="后备羊" :value="5" />

              </el-select>
            </template>
          </el-table-column>



          <el-table-column label="只数（默认不能修改）" align="center">
            <template #default="scope">
              <span>1</span>
            </template>
          </el-table-column>
          <el-table-column label="重量（公斤）" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.weight" placeholder="重量" />
            </template>
          </el-table-column>
        </el-table>

        <div>
          <span style="font-weight: bolder;text-align: left;color:gray;">合计</span>
          <span style="font-weight: bolder;margin-left: 880px;color:gray;">0.00</span>

          <span style="font-weight: bolder;float: right;color:gray;">0.00</span>


        </div>
        <div>
          <el-button link type="danger" @click="Addform()"> + 增行 </el-button>
          <el-button link type="danger" @click="Deleteform()"> - 删行 </el-button>
        </div>
      </div>
      <div>
        <el-form ref="ruleFormRef" :model="form" label-width="auto" class="demo-ruleForm" status-icon>
          <el-form-item label="备注">
            <div style="border: 1px solid #ccc">
              <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" />
              <Editor style="height: 300px; overflow-y: hidden;" v-model="form.remark" :defaultConfig="editorConfig"
                @onCreated="handleCreated" />
            </div>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>
<script setup lang="ts">

//期初
import start from '@/api/BreedingManagement/index'
import { startAdd } from '@/api/BreedingManagement/model'

//耳号
import sheepfile from '@/api/ProductionManagement/index'


//栋舍栏位
import purcure from '@/api/PurchaseMent/index'
import { purcoreQuery, buildingIdQuery } from '@/api/PurchaseMent/model'


import { ref, reactive, shallowRef } from 'vue'
//import start, { startAdd } from '@/api/BreedingManagement/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter();
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'


const editorConfig = { placeholder: '请输入内容...' }
const editorRef = shallowRef()
const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}


const page = reactive({
  total: 0,
  totalPage: 0,
});

//后裔耳号
const children = ref([])
const getChildren = () => {
  const form = reactive({
    presentState: 2,
    sheepType: 3
  })
  sheepfile.updatesheepfilestatus(form.presentState, form.sheepType).then(res => {
    children.value = res.data
  })
}

//获取栋舍
const forms = reactive<buildingIdQuery>({
  "pageIndex": 1,
  "pageSize": 100,
  "ridgepoleTypeId": 0,
  "ridgepoleName": "",
  "responsiblePerson": ""
})
const buildingIdList: any = ref([])
const getBuildingIdList = () => {
  purcure.getrid(forms).then((res: any) => {
    buildingIdList.value = res.data.data
  })
}
//获取栏位
const columnIdList: any = ref([])
const getcolumnIdList = (id: any) => {
  console.log(id)
  purcure.getcolumn(id).then((res: any) => {
    columnIdList.value = res.data
    console.log(columnIdList.value)
  })
  columnIdList.value = []
}

onMounted(() => {
  getChildren();
  getBuildingIdList();

});





//添加字段
const form = reactive({
  remark: ""
})
const datatable = reactive([
  {
    type: 3,
    earTag: '',
    ridgepoleId: null,
    columnManagementId: null,
    weight: null,
    onlyNumber: 0,
    remark: '',
    documentNumber: '',
    stage: 0,
    isdel: false,
    replantingDate: '2024-07-27'
  },
])
const c = ref(0);
//增行
const Addform = () => {
  c.value = 1;
  datatable.forEach((item) => {
    c.value++;
  });
  datatable.push({
    type: 3,
    earTag: '',
    ridgepoleId: null,
    columnManagementId: null,
    weight: null,
    onlyNumber: 0,
    documentNumber: '',
    stage: 0,
    isdel: false,
    replantingDate: '2024-07-27'
  });
};
//删行
const Deleteform = () => {
  datatable.pop();
};



//添加
const AddRam = () => {
  datatable.forEach(element => {
    element.remark = form.remark
  });
  console.log(datatable)
  console.log(form)
  start.addStart(datatable).then(res => {
    if (res.data > 0) {
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
      router.push({
        name: "/EarlyDescent",
      })
    }
  })
}
</script>
